<template>
	<view>
		<view class="container">
			<view class="right-content">
				<view class="input-demo">
					<view>键盘右下角按钮显示为发送</view>
					<input type="text" confirm-type="send" placeholder="请输入内容" />
				</view>
				<view class="input-demo">
					<view>控制最大输入长度的 input</view>
					<view>最大输入长度为10</view>
					<input type="text" maxlength="10" v-model="input1" />
					<view>实时获取输入值：{{input1}}</view>
					<view>{{input1}}</view>
				</view>
				<view class="input-demo">
					<view>数字输入的 input</view>
					<input type="number" v-model="input2" />
				</view>
				<view class="input-demo">
					<view>密码输入的 input</view>
					<input type="password" v-model="input3" />
				</view>
				<view class="input-demo">
					<view>带小数点的 input</view>
					<input type="digit" v-model="input4" />
				</view>
				<view class="input-demo">
					<view>身份证输入的 input</view>
					<input type="idcard" v-model="input5" />
				</view>
				<view class="input-demo">
					<view>控制占位符颜色的 input</view>
					<input type="text" placeholder="占位符字体是红色的" placeholder-style="color:red;" />
				</view>
				<view class="input-demo">
					<view>带清除按钮的输入框</view>
					<input type="text" v-model="input6" clearable />
				</view>
				<view class="input-demo">
					<view>可查看密码的输入框</view>
					<input type="password" v-model="input7" password-icon="eye" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				input1: '',
				input2: '',
				input3: '',
				input4: '',
				input5: '',
				input6: '',
				input7: '',
				typeData: [{
						value: 'text',
						desc: '文本输入键盘',
						platform: ''
					},
					{
						value: 'number',
						desc: '数字输入键盘',
						platform: '均支持，App平台、H5平台 3.1.22 以下版本 vue 页面在 iOS 平台显示的键盘包含负数和小数。'
					},
					{
						value: 'idcard',
						desc: '身份证输入键盘',
						platform: '微信、支付宝、百度、QQ小程序、快手小程序、京东小程序'
					},
					{
						value: 'digit',
						desc: '带小数点的数字键盘',
						platform: '均支持，App平台、H5平台 vue 页面在 iOS 平台显示的键盘包含负数。'
					},
					{
						value: 'tel',
						desc: '电话输入键盘',
						platform: '仅App的nvue页面支持'
					}
				],
				typeColumns: [{
						title: '值',
						key: 'value'
					},
					{
						title: '说明',
						key: 'desc'
					},
					{
						title: '平台差异说明',
						key: 'platform'
					}
				],
				confirmTypeData: [{
						value: 'send',
						desc: '右下角按钮为“发送”'
					},
					{
						value: 'search',
						desc: '右下角按钮为“搜索”'
					},
					{
						value: 'next',
						desc: '右下角按钮为“下一个”'
					},
					{
						value: 'go',
						desc: '右下角按钮为“前往”'
					},
					{
						value: 'done',
						desc: '右下角按钮为“完成”'
					}
				],
				confirmTypeColumns: [{
						title: '值',
						key: 'value'
					},
					{
						title: '说明',
						key: 'desc'
					}
				]
			};
		}
	};
</script>

<style>
	.container {
		display: flex;
		flex-direction: row;
	}

	.left-content {
		flex: 1;
		padding: 10px;
	}

	.right-content {
		flex: 1;
		padding: 10px;
	}

	.title {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.sub-title {
		font-size: 16px;
		color: #666;
		margin-bottom: 15px;
	}

	.mt20 {
		margin-top: 20px;
	}

	.input-demo {
		margin-bottom: 15px;
	}

	input {
		border: 1px solid #ccc;
		border-radius: 4px;
		padding: 5px;
		margin-top: 5px;
	}
</style>